<template>
    <div class="control-bar"></div>
    <div>
        <n-data-table
            :columns="tableControl.columns"
            :data="tableControl.data"
            :pagination="tableControl.pagination"
            :bordered="false" />
    </div>
</template>

<script setup lang="ts"> 
import { axg_getUserList, type UserListItem } from '@/utils/interface/User'
import { NButton, NSpace } from 'naive-ui'
import { h, onMounted, reactive } from 'vue'

const compControl = reactive({
    user_list: {
        data: [] as Array<UserListItem>,
        async handleGetUserList() {
            compControl.user_list.data = await axg_getUserList('local')
            tableControl.data = compControl.user_list.data
        }
    }
})
const tableControl = reactive({
    columns: [
        {
            title: '用户名',
            key: 'username'
        },
        {
            title: '用户ID',
            key: 'uid'
        },
        {
            title: '用户组',
            key: 'group'
        },
        {
            title: '用户目录',
            key: 'home'
        },
        {
            title: '解析器',
            key: 'shell'
        },
        {
            title: '操作',
            render: (row:UserListItem) => {
                if (row.username != 'root') {
                    return h(
                        NSpace,
                        { style: { gap: '0 4px' } },
                        {
                            default: () => [
                                h(NButton, { type: 'warning', size: 'tiny' }, () => '编辑'),
                                h(NButton, { type: 'error', size: 'tiny' }, () => '删除')
                            ]
                        }
                    )
                } else {
                    return h('span', null, '')
                }
            }
        }
    ],
    data: compControl.user_list.data,
    pagination: {
        pageSize: 20
    }
})
onMounted(() => {
    compControl.user_list.handleGetUserList()
})
</script>

<style lang="scss"></style>
